<template>
	<div class="blog-list-item" @click="toDetail(item.blogId)">
		<div class="item-top-box">
			<span>
				<span class="item-title" v-html="item.title"></span>
				<span v-if="item.openStatus == 1" class="open-status-1">私密</span>
			</span>
			<div class="item-time" >{{item.createTime}}</div>
		</div>

		<div class="item-bottom">
			<div class="item-bottom-left">
				<div class="item-tag-box">
          <svg-icon icon-class="blog-tag" style="margin-right:8px"/>
					<div>{{item.tagName}}</div>     
        </div>
				<div class="item-status-dot"/>
				<div class="item-user-name">{{item.userName}}</div>
			</div>

			<div class="item-bottom-right">
				<div class="item-status-num">阅读 {{item.readNum || 0}}</div>     
			</div>
		</div>
	</div>
</template>

<script>
export default {

  props: ["item"],


  data(){
    return {
      list:""
    }
  },

  methods:{
    toDetail(id){
			window.open('/blogDetail?id='+id, '_blank')
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.blog-list-item{
	position: relative;
  border-bottom: 1px solid #f0f2f5;
	padding: 16px 10px;
	cursor: pointer;
	.flex();
	flex-direction: column;
	&:hover, &:active{
		background-color:#edf0f5;
	}

	.item-top-box{
		width: 100%;
		.flex-center-between();
		margin-bottom: 15px;

		.open-status-0{
			padding: 2px 4px;
			border-radius: 2px;
			color: #6b5;
			font-size: 12px;
			background: rgba(103,187,85,.1);
			margin-right: 10px;
		}

		.open-status-1{
			padding: 2px 4px;
			border-radius: 2px;
			color: #fc5531;
			font-size: 12px;
			background: #fff5f2;
			margin-right: 10px;
		}

		.item-title{
			font-size: 14px;
			color: #666666;
			font-weight: 600;
		}

		.item-time{
			font-size: 12px;
			color: #999999;
		}
	}

	.item-bottom{
		width: 100%;
		.flex-center-between();

		.item-bottom-left{
			.flex-center-start();

			.item-user-name{
				color: #999aaa;
				font-size: 12px;
			}

			.item-tag-box{
				color: #999aaa;
				.flex-center-start();
				font-size: 12px;
			}

			.item-status-dot{
				height: 3px;
				width: 3px;
				border-radius: 50%;
				background-color: #555666;
				margin: 0 8px;
			}
		}

		.item-bottom-right{
			.flex-center-start();

			.item-status-num{
				color: #999aaa;
				font-size: 12px;
			}
		}
	}
}

</style>
